<template> 
    <div class="layout-content">
            <Row>
                <Col span="4" style="overflow:hidden">
                    <Menu active-name="1-2" width="auto" :open-names="['1']">
                        <Tree :data="data"  @on-select-change="onChangeTree"></Tree>
                        <!-- <Tree :data="data2" show-checkbox @on-select-change="onChangeTree"></Tree> -->
                    </Menu>
                </Col>
                <Col span="20">
                    <div class="layout-content-main">
                        <Input v-model="filter.title" class="inputlenth">
                            <Button slot="append" icon="ios-search" @click="searchName"></Button>
                        </Input>
                        <Button type="error" @click="removeMore" style="marginRight:10px">删除多条记录</Button>
                        <Button type="primary" @click="mesAdd">添加新记录</Button>

                        <Table class="tab" border 
                        :columns="columns7" :data="filter.data6" :height="355" 
                        @on-selection-change="onSelectChange"></Table>

                        <Page class="page" :total="filter.total" :page-size-opts="[5,10,20,40]" 
                        show-elevator show-sizer show-total 
                        @on-change="change" @on-page-size-change="changePage"></Page>
                    </div>
                </Col>
            </Row>

            <Modal v-model="modal" :title="titleUpdata">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="cateID" prop="cateId">
                        <Input v-model="formValidate.cateId" readonly></Input>
                    </FormItem>
                    <FormItem label="标题" prop="title">
                        <Input v-model="formValidate.title" placeholder="标题"></Input>
                    </FormItem>
                    <FormItem label="作者" prop="author">
                        <Input v-model="formValidate.author" placeholder="作者"></Input>
                    </FormItem>
                    <FormItem label="内容" prop="content">
                        <vue-editor id="vueEditor" v-model="formValidate.content" placeholder="content here"></vue-editor>
                    </FormItem>
                    <FormItem>
                        <Button type="success" @click="selectImage" style="margin-right:10px">选择图片</Button>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
            </Modal>

            <Modal v-model="modal2" title="选择图片" :width="1200"@on-ok="ok">
                <app-Upload v-model="imgId" @img="imgId=$event"></app-Upload>
            </Modal>
    </div>
</template>
<script>
import { VueEditor } from 'vue2-editor';
import {eventButtons} from "../../main.js";
import appUpload from "../upload/upload.vue";

import {formatDateTime} from '../../date'
export default {
    data () {
        return {
            data: [
                    {
                        title: '总分类',
                        expand: true,
                        children: []
                    }
                ],
            columns7: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title:"标题",
                    key:'title',
                    align: 'center',
                },
                {
                    title: '作者',
                    key: 'author',
                    align: 'center',
                },
                {
                    title: '内容',
                    key: 'content',
                    align: 'center',
                    type: 'html'
                },
                {
                    title: '评论人数',
                    key: 'comNum',
                    align: 'center',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        // eventButtons.$emit("commitId",params.row._id)
                                        var id = params.row._id
                                        this.$router.push({path:'/commits/'+id})
                                    }
                                }
                            }, '评论'),
                            h('Button', {
                                props: {
                                    type: 'warning',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.row)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            filter:{
                data6: [],
                limit: 10,
                page: 1,
                total: 0,
                title:"",
                cate:"",
                filename:"",
                _id:"",
            },
            ids: [], 
            modal: false,
            modal2: false,
            titleUpdata:"",
            formValidate: {
                cateId: '',
                title: '',
                author:'',
                content: '',
                thumb:'',
            },
            ruleValidate: {
                title: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                author: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ],
                content: [],
            },
            cate:"",
            addFlag:false,
            imgId:'',
        }
    },
    methods:{
        getCate(){
            this.$http.get("http://127.0.0.1:3000/cate/list/0")
            .then(res=>{
                this.data[0].children = res.data
            })
        },
        getData(){
            this.$http.post("http://127.0.0.1:3000/news/list",this.filter)
            .then(res=>{
                console.log(formatDateTime(res.data.rows[0].data))//时间转换
                this.filter.total = res.data.total;
                this.filter.data6 = res.data.rows
            });
        },
        show(row){
            console.log(row);
            this.titleUpdata = "修改新闻";
            Object.assign(this.formValidate,row);
            this.modal = true;
            console.log(this.formValidate)
        },
        remove(row){
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确定要删除该记录？</p>',
                onOk: () => {
                    console.log(row._id)
                    this.$http.delete("http://127.0.0.1:3000/news/data/"+row._id)
                    .then(res=>{
                        this.getData();
                        this.$Message.info('删除成功');
                    })
                },
                onCancel: () => {
                    // this.$Message.info('点击了取消');
                }
            });
        },
        removeMore(){
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确定要删除该记录？</p>',
                onOk: () => {
                    this.$http.post("http://127.0.0.1:3000/news/removes",{ids:this.ids.toString()})
                    .then(res=>{
                        this.getData();
                        this.$Message.info('删除成功');
                    })
                }
            });
        },
        change: function (page) {
            this.filter.page = page;
            this.getData();
        },
        changePage(rows){
            this.filter.limit = rows;
            this.getData();
        },
        onSelectChange(rows){
            if(rows){
                var ids = [];
                rows.filter(res=>{
                    ids.push(res._id);
                });
                this.ids = ids;
                // console.log(this.ids)
            }
        },
        mesAdd(){
            this.addFlag = true;
            if(this.cate!=""){
                this.modal = true;
                this.idFlag = false;
                this.formValidate = {};
                Object.assign(this.formValidate,this.$options.data().formValidate);
                this.formValidate.cateId = this.cate;
                this.titleUpdata = "添加新闻";
            }else{
                this.$Modal.info({
                    title: '错误提示',
                    content: `请选择新闻类别`
                })
            }
        },
        searchName(){
            this.getData();
        },
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                console.log(this.formValidate);
                if (valid) {
                    if(this.addFlag){
                        this.$http.post("http://127.0.0.1:3000/news/data/",this.formValidate)
                        .then(res=>{
                            this.modal = false;
                            this.getData();
                            this.$Message.success('修改成功!');
                        });
                        this.addFlag = false;
                    }else{
                        this.$http.post("http://127.0.0.1:3000/news/data/"+this.formValidate._id,this.formValidate)
                        .then(res=>{
                            this.modal = false;
                            this.getData();
                            this.$Message.success('提交成功!');
                        })    
                    }
                }else{
                    this.$Message.error('表单验证失败!');
                }
                
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        onChangeTree(row){
            this.filter.page = 1;
            this.filter.title = "";
            this.filter.filename = "";
            if(row.length>0){
                this.cate = row[0]._id;
                if(this.cate){
                    this.$http.get("http://127.0.0.1:3000/cate/getFamily/"+this.cate)
                    .then(res=>{
                        this.filter._id = res.data.toString();
                        console.log(this.filter._id);
                        this.getData();
                    })
                }else{
                    this.cate = "";
                    this.filter._id = "";
                    this.getData();
                }
            }else{
                this.cate = "";
                this.filter._id = "";
                this.getData();
            }
            console.log(this.cate);
            
        },
        selectImage(){
            this.modal2 = true;
        },
        ok(){
            this.formValidate.thumb = this.imgId;
            this.modal2 = false;
            this.$Message.info('选择成功');
        },
        // cancel () {
        //     this.$Message.info('点击了取消');
        // }
    },
    created(){
        this.getCate();
        this.getData()
    },
    components:{
        VueEditor,
        appUpload
    }
}
</script>
<style scoped>
    .tab{
        /* max-height:442px; */
        /* overflow:scroll; */
        margin-top:10px
    }
    .inputlenth{
      width:280px;
      float: left;
      margin-right: 20px;
  }
  .layout-content-main{
      /* border-left: 0 */
  }
  .page{
    margin-top:10px
  }
  #vueEditor{
      height: 30px;
  }
</style>

